<template>
  <el-table :data="data" style="width: 100%" border>
    <el-table-column prop="id" label="用户ID" align="center" />
    <el-table-column prop="nickname" label="昵称" align="center" width="80px" />
    <el-table-column prop="createTime" label="报名时间" align="center" :formatter="dateFormatter" />
    <el-table-column prop="status" label="报名状态" align="center">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.ENROLL_STATUS" :value="scope.row.status" />
      </template>
    </el-table-column>
    <el-table-column prop="payAmount" label="缴费金额" align="center" width="90px">
      <template #default="scope"> ￥{{ scope.row.payAmount }} </template>
    </el-table-column>
    <el-table-column prop="payTime" label="缴费时间" align="center" :formatter="dateFormatter" />
    <el-table-column prop="payType" label="支付方式" align="center" width="90px">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.PAY_TYPE" :value="scope.row.payType" />
      </template>
    </el-table-column>
    <el-table-column prop="payNo" label="支付单号" align="center" width="140px" />
    <el-table-column label="核销码" align="center">
      <template #default="scope">
        <span class="cursor-pointer color-blue" @click="handleOpenRecords(scope.row.activityId,scope.row.userId)">查看</span>
      </template>
    </el-table-column>
  </el-table>

  <!-- 弹窗：查看核销码 -->
  <Records ref="formRefRecords" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { DICT_TYPE } from '@/utils/dict'
import Records from './Records.vue'

const { data } = defineProps<{ data }>()

// [弹窗] 查看核销码
const formRefRecords = ref()
const handleOpenRecords = (id,userId) => {
  formRefRecords.value.open(id,userId)
}
</script>
